<template>
  <div>
    <template>
      <!--表格-->
      <el-table
          :data="tabledate"
          border
          style="width: 100%">
        <div v-for="item in tableinfo" :key="item.id">
          <el-table-column
              fixed
              :prop="item[1]"
              :label="item[0]"
              :width="withd">
          </el-table-column>
        </div>

        <!--操作-->
        <div v-if="tablebutton != null">
        <el-table-column
            fixed="right"
            label="操作"
            :width="withd">
          <template slot-scope="scope">
            <div v-if="tablebutton[0] != '' && tablebutton[0] != null" style="float: left;width: 40%">
            <el-button @click="selectClick(scope.row)" type="text" size="small">{{tablebutton[0]}}</el-button>
            </div>
            <div v-if="tablebutton[1] != '' && tablebutton[1] != null" style="float: left;width: 40%">
            <el-button @click="updateClick(scope.row)" type="text" size="small">{{tablebutton[1]}}</el-button>
            </div>
            <div v-if="tablebutton[2] != '' && tablebutton[2] != null" style="float: left;width: 20%">
              <el-button @click="deleteClick(scope.row)" type="text" size="small">{{tablebutton[2]}}</el-button>
            </div>
          </template>
        </el-table-column>
        </div>
      </el-table>
    </template>

    <!--分页-->
    <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalmsg"
        :page-size="pageSize"
        :current-page="currentPage"
        :page-sizes="[4,6,8,10,12]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="handlePrevClick"
        @next-click="handleNextClick">
    </el-pagination>

    <!--button-->
    <div v-for="item in button" :key="item.id" style="position: absolute;margin-top: 100px;left: 400px">
      <el-button type="primary" @click="onSubmit">{{item}}</el-button>
    </div>

    <!--dialog-->
    <el-dialog
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
      <div v-if="dialog.BuyList"><BuyList :buyId="dialog.id" @close="handleClose"></BuyList></div>
      <div v-if="dialog.SaleList"><SaleList :saleId="dialog.id" @close="handleClose"></SaleList></div>

      <div v-if="dialog.AddProvider"><AddProvider @init="init" @close="handleClose"></AddProvider></div>
      <div v-if="dialog.UpdateProvider" style="text-align: center"><UpdateProvider @init="init" :buyId="dialog.id" @close="handleClose"></UpdateProvider></div>
      <div v-if="dialog.SelectProvider"><SelectProvider :buyId="dialog.id" @close="handleClose"></SelectProvider></div>

      <div v-if="dialog.AddClient"><AddClient @init="init" @close="handleClose"></AddClient></div>
      <div v-if="dialog.UpdateClient"><UpdateClient @init="init" :buyId="dialog.id" @close="handleClose"></UpdateClient></div>
      <div v-if="dialog.SelectClient"><SelectClient :buyId="dialog.id" @close="handleClose"></SelectClient></div>

      <div v-if="dialog.CargoInfo"><CargoInfo :buyId="dialog.id" @close="handleClose"></CargoInfo></div>
      <div v-if="dialog.UpdateCargoSaleMoney"><UpdateCargoSaleMoney @init="init" :buyId="dialog.id" @close="handleClose"></UpdateCargoSaleMoney></div>

      <div v-if="dialog.AddUser"><AddUser @init="init" @close="handleClose"></AddUser></div>
      <div v-if="dialog.UpdateUserRole"><UpdateUserRole @init="init" :buyId="dialog.id" @close="handleClose"></UpdateUserRole></div>

      <div v-if="dialog.AddRole"><AddRole @init="init" @close="handleClose"></AddRole></div>

      <div v-if="dialog.SelectRolePower"><SelectRolePower :buyId="dialog.id" @close="handleClose"></SelectRolePower></div>

      <div v-if="dialog.UpdateRolePower"><UpdateRolePower @init="init" :buyId="dialog.id" @close="handleClose"></UpdateRolePower></div>

    </el-dialog>
  </div>
</template>

<script>
import BuyList from "@/components/BuyList";
import SaleList from "@/components/SaleList";
import AddProvider from "@/components/AddProvider";
import UpdateProvider from "@/components/UpdateProvider";
import SelectProvider from "@/components/SelectProvider";
import AddClient from "@/components/AddClient";
import SelectClient from "@/components/SelectClient";
import UpdateClient from "@/components/UpdateClient";
import CargoInfo from "@/components/CargoInfo";
import UpdateCargoSaleMoney from "@/components/UpdateCargoSaleMoney";
import AddUser from "@/components/AddUser";
import UpdateUserRole from "@/components/UpdateUserRole";
import AddRole from "@/components/AddRole";
import SelectRolePower from "@/components/SelectRolePower";
import UpdateRolePower from "@/components/UpdateRolePower";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Template",
  components:{
    BuyList,
    SaleList,

    SelectProvider,
    AddProvider,
    UpdateProvider,

    AddClient,
    SelectClient,
    UpdateClient,

    CargoInfo,
    UpdateCargoSaleMoney,

    AddUser,
    UpdateUserRole,

    AddRole,

    SelectRolePower,

    UpdateRolePower


  },
  props: {
    tableinfo:Array, //数据表结构
    tablebutton:Array, //操作结构
    button:Array,//
    tabledate:Array, //表格数据
    totalmsg:Number, //总数据条数
    identity:String, //身份证明
  },
  mounted() {
    this.withd = 1200/this.tableinfo.length
    this.init()
  },
  data(){
    return{
      withd:'',

      pageSize:4,
      currentPage:1,
      dialogVisible:false,
      dialog:{
        id:'',
        //查看采购详情
        BuyList:false,
        //查看销售详情
        SaleList:false,
        //供应商增查改
        AddProvider:false,
        UpdateProvider:false,
        SelectProvider:false,
        //客户增查改
        AddClient:false,
        UpdateClient:false,
        SelectClient:false,
        //库存管理
        CargoInfo:false,
        UpdateCargoSaleMoney:false,
        //用户管理
        AddUser:false,
        UpdateUserRole:false,
        //角色管理
        AddRole:false,
        SelectRolePower:false,
        UpdateRolePower:false

      }
    }
  },
  methods: {
    init(){
      this.$emit("init",this.currentPage,this.pageSize)
    },

    selectClick(row) { //查看操作
      switch (this.identity) {
        case 'Buyinfo':this.dialogVisible = true;this.dialog.BuyList = true;this.dialog.id=row.buyId;break;
        case 'SaleList':this.dialogVisible = true;this.dialog.SaleList = true;this.dialog.id=row.saleId;break;

        case 'Provider':this.dialogVisible = true;this.dialog.SelectProvider = true;this.dialog.id=row;break;

        case 'Client':this.dialogVisible = true;this.dialog.SelectClient = true;this.dialog.id=row;break;

        case 'StoreManager':this.dialogVisible = true;this.dialog.CargoInfo = true;this.dialog.id=row;break;

      }
      let url = ''
      switch (this.identity) {
        case 'UserManager':url = 'apj/user/deleteUser/'+row.userName;break;
        case 'RoleManager':url = 'apj/role/deleteRole/'+row.roleName;break;
        case 'AddSaleCargo':url = 'apj/saleshorttime/insertSaleCargo/'+row.cargoName+'/'+row.cargoFactory;break;
      }
      if (this.identity == 'AddSaleCargo'){
        if (url != '' && url != null && url != 'null'){
          this.$axios.get(url).then(r=>{
            this.$emit("refresh")
            this.$message.success(r.data)
          })
        }
      }else{
        if (url != '' && url != null && url != 'null'){
          this.$axios.get(url).then(r=>{
            this.init()
            this.$message.success(r.data)
          })
        }
      }
    },
    updateClick(row){ //修改操作
      this.dialogVisible = true
      switch (this.identity) {
        case 'Provider':this.dialog.UpdateProvider = true;this.dialog.id=row;break;

        case 'Client':this.dialog.UpdateClient = true;this.dialog.id=row;break;

        case 'StoreManager':this.dialog.UpdateCargoSaleMoney = true;this.dialog.id=row;break;

        case 'UserManager':this.dialog.UpdateUserRole = true;this.dialog.id=row;break;

        case 'RoleManager':this.dialog.SelectRolePower = true;this.dialog.id=row;break;

      }
    },
    deleteClick(row) { //删除操作
      this.dialogVisible = true
      switch (this.identity) {
        case 'RoleManager':this.dialog.UpdateRolePower = true;this.dialog.id=row;break;
      }

    },
    //关闭
    handleClose(){
      this.dialogVisible = false

      this.dialog.BuyList = false
      this.dialog.SaleList = false
      this.dialog.AddProvider = false
      this.dialog.UpdateProvider = false
      this.dialog.SelectProvider = false
      this.dialog.AddClient = false
      this.dialog.UpdateClient = false
      this.dialog.SelectClient = false
      this.dialog.CargoInfo = false
      this.dialog.UpdateCargoSaleMoney = false
      this.dialog.AddUser = false
      this.dialog.UpdateUserRole = false
      this.dialog.AddRole = false
      this.dialog.SelectRolePower = false
      this.dialog.UpdateRolePower = false
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val
      this.init()
    },

    handlePrevClick(){
      this.currentPage = this.currentPage-1
      this.init()
    },
    handleNextClick(){
      this.currentPage = this.currentPage+1
      this.init()
    },
    onSubmit(){
      this.dialogVisible = true
      switch (this.identity) {
        case 'Provider':this.dialog.AddProvider = true;break;
        case 'Client':this.dialog.AddClient = true;break;
        case 'UserManager':this.dialog.AddUser = true;break;
        case 'RoleManager':this.dialog.AddRole = true;break;
      }
    }
  }
}
</script>

<style scoped>

</style>